<template>
        <view class="uni-container">
			<el-dialog title="对账单回款" :visible.sync="dialogFormVisible" width="80%">
			  <el-form :model="form">
				<el-form-item label="回款时间" :label-width="formLabelWidth">
				  <div class="block">
					<el-date-picker
					  v-model="form.end_time"
					  type="datetime"
					  placeholder="选择日期时间">
					</el-date-picker>
				  </div>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="finishStatement">确 定</el-button>
			  </div>
			</el-dialog>
			<view class="uni-header">
				<view class="uni-group">
				<input class="uni-search" type="text" v-model="search.edition" placeholder="版本号" />
				<input class="uni-search" type="text" v-model="search.state" placeholder="发行商" />
				  <el-select v-model="search.state" clearable placeholder="请选择" size="mini" >
					<el-option
					  v-for="item in options"
					  :key="item.value"
					  :label="item.label"
					  :value="item.value">
					</el-option>
				  </el-select>
					<el-date-picker
					  v-model="search.beginTime"
					  type="daterange"
					  align="right"
					  unlink-panels
					  range-separator="至"
					  start-placeholder="对账开始"
					  end-placeholder="对账结束"
					  size="mini">
					</el-date-picker>
					<el-date-picker
					  v-model="search.endTime"
					  type="daterange"
					  align="right"
					  unlink-panels
					  range-separator="至"
					  start-placeholder="回款开始"
					  end-placeholder="回款结束"
					  size="mini">
					</el-date-picker>
					<el-button type="primary" size="mini" @click="searchData">搜索</el-button>
					<el-button type="primary" size="mini" @click="correctionStatementStat" v-if="$hasRole('admin')">对账单校正</el-button>
				</view>
			</view>
			<el-divider></el-divider>
			<el-table
				highlight-current-row
				:data="tableData.filter(data => !searchText || data.name.toLowerCase().includes(searchText.toLowerCase()) || data.edition.toLowerCase().includes(searchText.toLowerCase()))"
				:default-sort = "{prop: 'timeNum', order: 'descending'}"
				height="660"
				border
				stripe
				@sort-change="handleSort">
				<el-table-column
				  label="ID"
				  width="150"
				  prop="id">
				  <template slot="header" slot-scope="scope">
					<el-input
					  v-model="searchText"
					  size="mini"
					  placeholder="输入关键字搜索"/>
				  </template>
				</el-table-column>
				<el-table-column
				  label="版本ID"
				  width="150"
				  sortable
				  prop="edition">
				</el-table-column>
				<el-table-column
				  label="版本名称"
				  width="150"
				  sortable
				  prop="name">
				</el-table-column>
				<el-table-column
				  label="状态"
				  width="100">
				  <template slot-scope="scope">
					<view class="uni-group">
						<div v-if="scope.row.state == 0" style="color:#c7c7c7">待回款</div>
						<div  v-else-if="scope.row.state == 1" style="color:#00cc33">已回款</div>
						<div  v-else style="color:#ff0000">已作废</div>
					</view>
				  </template>
				</el-table-column>
				<el-table-column
				  label="回款金额"
				  width="100"
				  sortable
				  prop="money">
				</el-table-column>
				<el-table-column
				  label="结算金额"
				  sortable
				  width="100"
				  prop="rmb">
				</el-table-column>
				<el-table-column
				  label="回款比例"
				  sortable
				  width="100"
				  prop="rate">
				</el-table-column>
				<el-table-column
				  label="代金券"
				  width="100"
				  sortable
				  prop="voucher">
				</el-table-column>
				<el-table-column
				  label="测试费"
				  width="100"
				  sortable
				  prop="test">
				</el-table-column>
				<el-table-column
				  label="对账人员"
				  width="80"
				  sortable
				  prop="uid">
				</el-table-column>
				<el-table-column
				  label="对账时间"
				  width="150"
				  prop="create_time">
				</el-table-column>
				<el-table-column
				  label="回款时间"
				  width="150"
				  prop="end_time">
				</el-table-column>
				<el-table-column
				  label="发行商"
				  width="50"
				  sortable
				  prop="publisher">
				</el-table-column>
				<el-table-column
				  label="操作"
				  fixed = "right"
				  width="200">
				  <template slot-scope="scope">
					<view class="uni-group">
						<button class="uni-button" size="mini" type="primary" @click="finishDialog(scope.row.id)" v-if="scope.row.state == 0">确认回款</button>
						<button class="uni-button" size="mini" type="primary" @click="repealStatement(scope.row.id)" v-if="$hasRole('admin') && scope.row.state != 2">作废</button>
					</view>
				  </template>
				</el-table-column>
			</el-table>
            <view class="uni-pagination-box">
                <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
            </view>
        </view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
				dialogFormVisible : false,
				formLabelWidth : "70px",
				form: {
					id : 0,
					end_time : 0
				},
				searchText: '',
				search:{
					edition : null,
					publisher : null,
					beginTime : [],
					endTime : [],
					state : null
				},
				options: [{
				  value: null,
				  label: "全部"
				}, {
				  value: 0,
				  label: "未回款"
				}, {
				  value: 1,
				  label: "已回款"
				}, {
				  value: 2,
				  label: "已作废"
				}],
				serverData : [],
                tableData: [],
                // 每页数据量
                pageSize: 1000,
                // 当前页
                pageCurrent: 1,
				nameMap : {},
                // 数据总量
                total: 0,
                loading: false
            }
        },
        onLoad() {
            this.selectedIndexs = []
            this.getStatement(1)
			this.request("/total_info",{},(res) => {
				console.log("nameMap!!!",res.data)
				for(var i in res.data){
					this.nameMap[res.data[i]["name"]] = res.data[i]["data"]["des"]
				}
				console.log("nameMap!!!",this.nameMap)
			})
        },
        methods: {
            // 分页触发
            change(e) {
                this.getStatement(e.current)
            },
			searchData(){
				this.getStatement(1)
			},
			//对账单校正
			correctionStatementStat(){
				this.request("/correctionStatementStat",{},(res) => {console.log(res)
					this.$message({
					  message: '校正成功',
					  type: 'success'
					});
				})
			},
			//获取对账单列表
			getStatement(pageCurrent){
				console.log("getData!!!!!!!!!!!!!!!!!!!!!!",pageCurrent)
                this.loading = true
                this.pageCurrent = pageCurrent
				var info = {"pageCurrent":this.pageCurrent,"pageSize":this.pageSize}
				if(this.search){
					if(this.search.state != null)
						info.state = this.search.state
					if(this.search.edition)
						info.edition = this.search.edition
					if(this.search.publisher)
						info.publisher = this.search.publisher	
					if(this.search.beginTime[0])
						info.c_beginTime = new Date(this.search.beginTime[0]).getTime()
					if(this.search.beginTime[1])
						info.c_endTime = new Date(this.search.beginTime[1]).getTime()
					if(this.search.endTime[0])
						info.e_beginTime = new Date(this.search.endTime[0]).getTime()
					if(this.search.endTime[1])
						info.e_endTime = new Date(this.search.endTime[1]).getTime()
				}
				console.log("info",info)
				this.request("/getStatementPage",info,(res) => {
					console.log("getStatementPage",res)
					if(res.data.flag){
						this.total = res.data.total
						this.request("/getStatement",info,(res) => {
								var list = []
								if(res.data){
									for(var i = 0;i < res.data.list.length;i++){
										list[i] = res.data.list[i]
										list[i]["create_time"] = new Date(Number(list[i]["create_time"])).toLocaleDateString() + " " + new Date(Number(list[i]["create_time"])).toLocaleTimeString()
										if(list[i]["end_time"])
											list[i]["end_time"] = new Date(Number(list[i]["end_time"])).toLocaleDateString() + " " + new Date(Number(list[i]["end_time"])).toLocaleTimeString()
										list[i]["name"] = this.nameMap[list[i]["edition"]]
										list[i]["rate"] = Number((list[i]["money"] / (list[i]["rmb"] || 1)).toFixed(5))
									}
								}
								this.serverData = list
								console.log("serverData!!!",this.serverData)
								this.tableData = this.serverData
								console.log("tableData!!!",this.tableData)
								this.loading = false
						})
					}
				})
			},
			finishDialog(id){
				this.form.id = id
				this.form.end_time = Date.now()
				this.dialogFormVisible = true
			},
			//确认回款
			finishStatement(id){
				this.dialogFormVisible = false
				this.form.end_time = new Date(this.form.end_time).getTime()
				this.request("/finishStatement",this.form,(res) => {
					console.log(res)
					if(res.data.flag){
						this.$message({
						  message: '确认回款成功',
						  type: 'success'
						});
						this.getStatement(this.pageCurrent)
					}else{
						this.$message({
						  message: res.data.err,
						  type: 'error'
						});
					}
				})
			},
			//撤销回款
			repealStatement(id){
				this.request("/repealStatement",{"id":id},(res) => {
					console.log(res)
					if(res.data.flag){
						this.$message({
						  message: '撤销回款成功',
						  type: 'success'
						});
						this.getStatement(this.pageCurrent)
					}else{
						this.$message({
						  message: res.data.err,
						  type: 'error'
						});
					}
				})
			},
            // request请求
            request(path,options,success) {
				this.$axios.post(path,options)//传参
				.then(function(res){
					  success(res)
				})
				.catch(function(err){
					  console.log("请求失败233");
				});
            }
        }
    }
</script>

<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}
	/* #endif */
</style>
